<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>商家列表</p>
			<!-- 返回键 -->
			<GoBackButton></GoBackButton>
		</header>

        <div class="look-box">
            <div class="look">
                <span>TJUers特供版饿了么，<br>全场商品0元购</span>
            </div>
        </div>

		<!-- 商家列表部分 -->
		<ul class="business">
			<li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
				<div class="business-img">
					<img :src="item.businessImg">
					<div class="business-img-quantity" v-show="item.quantity>0">{{item.quantity}}</div>
				</div>
				<div class="business-info">
					<h3>{{item.businessName}}</h3>
					<p>&#165;0起送 | &#165;0配送</p>
					<p>{{item.businessExplain}}</p>
				</div>
			</li>
			<!-- 底部滑块 -->
			<UnderBox></UnderBox>
		</ul>

		<!-- 底部菜单部分 -->
		<Footer></Footer>

	</div>
</template>

<script>
	//共通组件导入
	import Footer from '../components/Footer.vue';
	import UnderBox from '../components/UnderBox.vue';
	import GoBackButton from '../components/GoBackButton.vue';

	export default {
		name: 'TJUBusinessList',
		data() { //接收数据
			return {
				//食物标签，商家名包含
				orderTypeId: 0,
				orderBusinessName: '',
				businessArr: [],
				user: {}
			}
		},
		created() { //生命周期
			this.user = this.$getSessionStorage('user');

			//根据orderTypeId查询商家信息
			this.$axios.get(
				'/businesses/orderType/' + this.orderTypeId,
			).then(response => {
				this.businessArr = response.data;
				//判断是否登录
				if (this.user != null) {
					this.listCart();
				}
			}).catch(error => {
				console.error(error);
			});


		},
		components: {
			Footer,
			UnderBox,
			GoBackButton
		},
		methods: {
			listCart() {
				this.$axios.get('carts/user', {
						params: {
							userId: this.user.userId
						}
					}).then(response => {
					let cartArr = response.data;
					//遍历所有食品列表
					for (let businessItem of this.businessArr) {
						businessItem.quantity = 0;
						for (let cartItem of cartArr) {
							if (cartItem.businessId == businessItem.businessId) {
								businessItem.quantity += cartItem.quantity;
							}
						}
					}
					this.businessArr.sort();
				}).catch(error => {
					console.error(error);
				});
			},
			toBusinessInfo(businessId) {
				this.$router.push({
					path: '/tJUBusinessInfo',
					query: {
						businessId: businessId
					}
				});
			}
		},
	}
</script>

<!-- scoped表示该设置是私有的，由于vue全局只有一个网页，所以属性默认是公有的 -->
<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color:#0097FF;
		color:rgb(191, 176, 156);
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

    .wrapper .look-box {
        margin-top: 12vw;
        width: 100%;
        height: 30vw;
        display: flex;
		justify-content: center;
		align-items: center;
        background-color: #0097FF;
    }

    .wrapper .look-box .look {
        width: 90%;
        text-align: center;
    }

    .wrapper .look-box .look span {
        color: rgb(191, 176, 156);
        font-size: 7vw;
		font-family: "微软雅黑";
    }

	/****************** 商家列表部分 ******************/
	.wrapper .business {
		width: 100%;
		margin-bottom: 14vw;
	}

	.wrapper .business li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		border-bottom: solid 1px #DDD;
		user-select: none;
		cursor: pointer;

		display: flex;
		align-items: center;
	}

	.wrapper .business li .business-img {
		/*这里设置为相当定位，成为business-img-quantity元素的父元素*/
		position: relative;
	}

	.wrapper .business li .business-img img {
		width: 20vw;
		height: 20vw;
	}

	.wrapper .business li .business-img .business-img-quantity {
		width: 5vw;
		height: 5vw;
		background-color: red;
		color: #fff;
		font-size: 3.6vw;
		border-radius: 2.5vw;

		display: flex;
		justify-content: center;
		align-items: center;

		/*设置成绝对定位，不占文档流空间*/
		position: absolute;
		right: -1.5vw;
		top: -1.5vw;
	}

	.wrapper .business li .business-info {
		margin-left: 3vw;
	}

	.wrapper .business li .business-info h3 {
		font-size: 3.8vw;
		color: #555;
	}

	.wrapper .business li .business-info p {
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}
</style>
